<template>
  <view class="container">
    <view class="login-content">
      <view class="logo-section">
        <text class="app-title">睡眠健康小助手</text>
        <text class="app-subtitle">让您的睡眠更健康、更美好</text>
      </view>

      <view class="form-section">
        <view class="input-group">
          <text class="input-label">用户名</text>
          <input 
            class="input-field" 
            type="text" 
            placeholder="请输入用户名"
            v-model="formData.username"
            maxlength="20"
          />
        </view>

        <view class="input-group">
          <text class="input-label">密码</text>
          <input 
            class="input-field" 
            type="password" 
            placeholder="请输入密码"
            v-model="formData.password"
            maxlength="20"
          />
        </view>

        <button class="login-btn" @click="handleLogin" :disabled="loading">
          {{ loading ? '登录中...' : '登录' }}
        </button>

        <view class="register-link">
          <text class="register-text">还没有账号？</text>
          <text class="register-btn" @click="goToRegister">立即注册</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'LoginPage',
  data() {
    return {
      formData: {
        username: '',
        password: ''
      },
      loading: false
    };
  },
  methods: {
    async handleLogin() {
      if (!this.formData.username || !this.formData.password) {
        this.showToast('请输入用户名和密码');
        return;
      }

      this.loading = true;
      try {
        // 这里应该调用登录API
        // const res = await loginApi.login(this.formData);
        
        // 模拟登录成功
        setTimeout(() => {
          uni.setStorageSync('token', 'mock-token-' + Date.now());
          uni.setStorageSync('userInfo', {
            username: this.formData.username,
            id: Date.now()
          });
          
          this.showToast('登录成功', 'success');
          
          // 返回上一页或首页
          const pages = getCurrentPages();
          if (pages.length > 1) {
            uni.navigateBack();
          } else {
            uni.switchTab({
              url: '/pages/index/index'
            });
          }
        }, 1000);
        
      } catch (error) {
        console.error('登录失败:', error);
        this.showToast('登录失败，请重试');
      } finally {
        this.loading = false;
      }
    },
    
    goToRegister() {
      // 跳转到注册页面
      uni.navigateTo({
        url: '/pages/register/index'
      });
    }
  }
};
</script>

<style>
.container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
}

.login-content {
  width: 100%;
  max-width: 600rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 60rpx 40rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
}

.logo-section {
  text-align: center;
  margin-bottom: 60rpx;
}

.app-title {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 16rpx;
}

.app-subtitle {
  display: block;
  font-size: 28rpx;
  color: #666;
}

.form-section {
  width: 100%;
}

.input-group {
  margin-bottom: 40rpx;
}

.input-label {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 16rpx;
  font-weight: 500;
}

.input-field {
  width: 100%;
  height: 88rpx;
  border: 2rpx solid #e5e5e5;
  border-radius: 12rpx;
  padding: 0 24rpx;
  font-size: 28rpx;
  color: #333;
  background: #fafafa;
  box-sizing: border-box;
}

.input-field:focus {
  border-color: #667eea;
  background: #fff;
}

.login-btn {
  width: 100%;
  height: 88rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border: none;
  border-radius: 12rpx;
  font-size: 32rpx;
  font-weight: 500;
  margin-bottom: 40rpx;
}

.login-btn:disabled {
  opacity: 0.6;
}

.register-link {
  text-align: center;
}

.register-text {
  font-size: 28rpx;
  color: #666;
}

.register-btn {
  font-size: 28rpx;
  color: #667eea;
  margin-left: 16rpx;
}
</style> 